@import "./Fn.less";
//IN
/* 1.fadeIn */
.keyframes(all,fadeIn,{
    0%{
        opacity: 0;
    }
    100%{
       opacity: 1;
    }
});
/* 2.fadeInDown */
.keyframes(all,fadeInDown,{
    0%{
        opacity: 0;
        .transform(translate3d(0, -100%, 0));
    }
    100%{
       opacity: 1;
       .transform(none);
    }
});
/* 3.fadeInDownBig */
.keyframes(all,fadeInDownBig,{
    0%{
        opacity: 0;
        .transform(translate3d(0, -2000px, 0));
    }
    100%{
       opacity: 1;
       .transform(none);
    }
});
/* 4.fadeInUp */
.keyframes(all,fadeInUp,{
    0%{
        opacity: 0;
        .transform(translate3d(0, 100%, 0));
    }
    100%{
       opacity: 1;
       .transform(none);
    }
});
/* 5.fadeInRight */
.keyframes(all,fadeInRight,{
    0%{
        opacity: 0;
        .transform(translate3d(100%, 0, 0));
    }
    100%{
       opacity: 1;
       .transform(none);
    }
});
/* 6.zoomIn */
.keyframes(all,zoomIn,{
    0%{
        opacity: 0;
        .transform(scale3d(0.3, 0.3, 0.3));
    }
    50%{
       opacity: 1;
    }
});


//OUT
/* 1.fadeOutUp  */
.keyframes(all,fadeOutUp,{
    0%{
        opacity: 1;
    }
    100%{
       opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
});
/* 2.fadeOutRight */
.keyframes(all,fadeOutRight,{
    0%{
        opacity: 1;
    }
    100%{
       opacity: 0;
       .transform(translate3d(100%, 0, 0));
    }
});
/* 3.zoomOut  */
.keyframes(all,zoomOut ,{
    0%{
        opacity: 1;
    }
    50%{
       opacity: 0;
       .transform(scale3d(0.3, 0.3, 0.3));
    }
    100%{
       opacity: 0;
    }
});
/* 3.fadeOutDown  */
.keyframes(all,fadeOutDown ,{
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
});
/* 4.fadeOut  */
.keyframes(all,fadeOut ,{
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
});



/* 4.heartBeat  */
.keyframes(all,heartBeat ,{
    0% {
        .transform(scale3d(0.95, 0.95, 0.95));
        box-shadow: 0 0 0 rgb(63, 245, 217),0 0 0 #ececec,0 0 0 #ececec,0 0 0 #ececec;
    }

    50% {
        .transform(scale3d(1, 1, 1));
        box-shadow: 0 4px 14px #ececec,0 -4px 14px #ececec,4px 0 14px #ececec,-4px 0 14px #ececec;
    }
    100% {
        .transform(scale3d(0.95, 0.95, 0.95));
        box-shadow: 0 0 0 #ececec,0 0 0 #ececec,0 0 0 #ececec,0 0 0 #ececec;
    }
});

